<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
<div class="form-box">
    <div class="nav">
        <ul>
            <li>系统管理</li>
            <li>/</li>
            <li>关于我们</li>
        </ul>
    </div>
    <!--详情about_details   -->
    <div class="form-control">
        <label>详情</label>
        <textarea style="width: 500px; height: 250px;" id="aboutDetails"></textarea>
    </div>

    <!-- 六张图片 -->
    <input type="hidden" id="img1"> <label>图1</label>
    <form enctype="multipart/form-data">
        <input name="file" type="file"/> <input name="Token" type="hidden"
                                                value="68gl3i8ak1kj495d92p76ri37iaork9l:1EBWt6slqN4v0mdjtTTQcBec6MY=:eyJkZWFkbGluZSI6MTY2MTE3MjcyOCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoxNzc4MiwiYWlkIjoiMzMwMjYiLCJmcm9tIjoiZmlsZSJ9"/>
        <input type="button" onclick="upLoadPicture1()" value="上传"/>
        <div id="img1-box"></div>
    </form>

    <input type="hidden" id="img2"> <label>图2</label>
    <form enctype="multipart/form-data">
        <input name="file" type="file"/> <input name="Token" type="hidden"
                                                value="68gl3i8ak1kj495d92p76ri37iaork9l:1EBWt6slqN4v0mdjtTTQcBec6MY=:eyJkZWFkbGluZSI6MTY2MTE3MjcyOCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoxNzc4MiwiYWlkIjoiMzMwMjYiLCJmcm9tIjoiZmlsZSJ9"/>
        <input type="button" onclick="upLoadPicture2()" value="上传"/>
        <div id="img2-box"></div>
    </form>

    <input type="hidden" id="img3"> <label>图3</label>
    <form enctype="multipart/form-data">
        <input name="file" type="file"/> <input name="Token" type="hidden"
                                                value="68gl3i8ak1kj495d92p76ri37iaork9l:1EBWt6slqN4v0mdjtTTQcBec6MY=:eyJkZWFkbGluZSI6MTY2MTE3MjcyOCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoxNzc4MiwiYWlkIjoiMzMwMjYiLCJmcm9tIjoiZmlsZSJ9"/>
        <input type="button" onclick="upLoadPicture3()" value="上传"/>
        <div id="img3-box"></div>
    </form>

    <input type="hidden" id="img4"> <label>图4</label>
    <form enctype="multipart/form-data">
        <input name="file" type="file"/> <input name="Token" type="hidden"
                                                value="68gl3i8ak1kj495d92p76ri37iaork9l:1EBWt6slqN4v0mdjtTTQcBec6MY=:eyJkZWFkbGluZSI6MTY2MTE3MjcyOCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoxNzc4MiwiYWlkIjoiMzMwMjYiLCJmcm9tIjoiZmlsZSJ9"/>
        <input type="button" onclick="upLoadPicture4()" value="上传"/>
        <div id="img4-box"></div>
    </form>

    <input type="hidden" id="img5"> <label>图5</label>
    <form enctype="multipart/form-data">
        <input name="file" type="file"/> <input name="Token" type="hidden"
                                                value="68gl3i8ak1kj495d92p76ri37iaork9l:1EBWt6slqN4v0mdjtTTQcBec6MY=:eyJkZWFkbGluZSI6MTY2MTE3MjcyOCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoxNzc4MiwiYWlkIjoiMzMwMjYiLCJmcm9tIjoiZmlsZSJ9"/>
        <input type="button" onclick="upLoadPicture5()" value="上传"/>
        <div id="img5-box"></div>
    </form>

    <input type="hidden" id="addressImg"> <label>地址图</label>
    <form enctype="multipart/form-data">
        <input name="file" type="file"/> <input name="Token" type="hidden"
                                                value="68gl3i8ak1kj495d92p76ri37iaork9l:1EBWt6slqN4v0mdjtTTQcBec6MY=:eyJkZWFkbGluZSI6MTY2MTE3MjcyOCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoxNzc4MiwiYWlkIjoiMzMwMjYiLCJmcm9tIjoiZmlsZSJ9"/>
        <input type="button" onclick="upLoadPicture6()" value="上传"/>
        <div id="imgAddress-box"></div>
    </form>

    <div class="form-control">
        <label>地址</label> <input type="text" id="address">
    </div>

    <div class="form-control">
        <label>固定电话</label> <input type="text" id="fixed">
    </div>

    <div class="form-control">
        <label>移动电话</label> <input type="text" id="moblie">
    </div>

    <div class="form-control">
        <label>传真</label> <input type="text" id="fax">
    </div>

    <div class="form-control">
        <label>邮箱</label> <input type="text" id="email">
    </div>
    <br/>
</div>
<div class="btn-box">
    <input type="button" id="updateBtn" value="提交"> <input
        type="reset" value="重填">
</div>
<script>
    tinymce.init({
        selector: '#aboutDetails',
        language: 'zh_CN',
        toolbar: true,
        menubar: true,
        branding: false,
        inline: false,
        elementpath: false,
        min_height: 400,
        height: 800,
        skin: 'oxide',
        toolbar_sticky: true,
        visualchars_default_state: true,
        image_caption: true,
        paste_data_images: true,
        relative_urls: false,
        removed_menuitems: 'newdocument',
        plugins: "lists,hr, advlist,anchor,autolink,autoresize,charmap,code,codesample,emoticons,fullscreen,image,media,insertdatetime,link,pagebreak,paste,preview,print,searchreplace,table,textcolor,toc,visualchars,wordcount", //依赖lists插件
        toolbar: 'bullist numlist anchor charmap emoticons fullscreen hr image insertdatetime link media pagebreak paste preview print searchreplace textcolor wordcount',
        images_upload_url: 'a.php',
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        }
    });
</script>

<script type="text/javascript">
    $("#updateBtn").click(function () {
        var img1 = $("#img1").val();
        var img2 = $("#img2").val();
        var img3 = $("#img3").val();
        var img4 = $("#img4").val();
        var img5 = $("#img5").val();
        var addressImg = $("#addressImg").val();
        var address = $("#address").val();
        var fixedPhone = $("#fixed").val();
        var mobliePhone = $("#moblie").val();
        var fax = $("#fax").val();
        var email = $("#email").val();
        var aboutDetails = tinyMCE.activeEditor.getContent();
        $.post("/web/aboutInfo", {
            op: "update",
            aboutImg1: img1,
            aboutImg2: img2,
            aboutImg3: img3,
            aboutImg4: img4,
            aboutImg5: img5,
            addressImg: addressImg,
            address: address,
            fixedPhone: fixedPhone,
            mobliePhone: mobliePhone,
            fax: fax,
            email: email,
            aboutDetails: aboutDetails
        }, function (data) {
            alert("编辑" + (data == '1' ? "成功" : "失败"));
        });
    });
    $(function() {
        $.get("/web/aboutInfo", {op: "query"}, function (data) {
            $("#aboutDetails").val(data.aboutDetails);
            $("#img1").val(data.aboutImg1);
            $("#img1-box").empty();
            $("#img1-box").append(`<img src="${data.aboutImg1}" height = 100/>`);
            $("#img2").val(data.aboutImg2);
            $("#img2-box").empty();
            $("#img2-box").append(`<img src="${data.aboutImg2}" height = 100/>`);
            $("#img3").val(data.aboutImg3);
            $("#img3-box").empty();
            $("#img3-box").append(`<img src="${data.aboutImg3}" height = 100/>`);
            $("#img4").val(data.aboutImg4);
            $("#img4-box").empty();
            $("#img4-box").append(`<img src="${data.aboutImg4}" height = 100/>`);
            $("#img5").val(data.aboutImg5);
            $("#img5-box").empty();
            $("#img5-box").append(`<img src="${data.aboutImg5}" height = 100/>`);
            $("#addressImg").val(data.addressImg);
            $("#imgAddress-box").empty();
            $("#imgAddress-box").append(`<img src="${data.addressImg}" height = 100/>`);
            $("#address").val(data.address);
            $("#fixed").val(data.fixedPhone);
            $("#moblie").val(data.mobliePhone);
            $("#fax").val(data.fax);
            $("#email").val(data.email);
        });
    });
</script>
</body>
</html>